<template>
  <section class="my-index">
    <div class="top">
      <div class="flex flex-between top-">
        <div class="flex flex-middle">
          <img
            @click="routerTo('/pages/my/data/main')"
            class="avatar"
            :src="info.headImgUrl?info.headImgUrl:'/static/images/my/geren.png'"
            mode="aspectFit"
          />
          <div>
            <div class="name">{{info.nickName}}</div>
            <div
              v-if="info.realNameStatus == 0"
              class="flex flex-middle"
              @click="routerTo('/pages/auth/main?type=1')"
            >
              <span class="status">未认证</span>
              <van-icon name="arrow" />
            </div>
            <div class="flex flex-middle" v-else>
              <span class="status">已认证</span>
            </div>
          </div>
        </div>
        <div class="flex flex-middle isConversation" >
          <img
            @click="routerTo('/pages/tim/index/main')"
            class="icon"
            src="/static/images/my/tuceng86.png"
            mode="aspectFit"
          />
          <van-icon v-if="isConversation" name="ellipsis" class="ellipsis" color="#fff" />

          <img
            @click="routerTo('/pages/auth/main?type=2')"
            class="icon"
            src="/static/images/my/tuceng85.png"
            mode="aspectFit"
          />
        </div>
      </div>
      <div class="flex flex-between flex-middle bottom-">
        <div class="flex-col flex-middle" @click="routerTo('/pages/my/commission/main')">
          <div class="num">{{info.commission}}</div>
          <div class="num-desc">佣金</div>
        </div>
        <div class="flex-col flex-middle" @click="routerTo('/pages/my/integral/main')">
          <div class="num">{{info.point}}</div>
          <div class="num-desc">积分</div>
        </div>
        <div>
          <div class="qiandao" @click="routerTo('/pages/my/checkin/main')">签到</div>
        </div>
      </div>
    </div>
    <!-- 我的简历 -->
    <div class="flex flex-between flex-middle resume" @click="routerTo('/pages/my/resume/main')">
      <div>
        <div class="title-">我的简历</div>
        <div class="desc- mt10">完善简历将有助于提升您的录取率</div>
        <button class="btn- mt15">立即完善</button>
      </div>
      <!-- <view class="wrap flex flex-center flex-middle">
        <div class="baifenbi">{{info.resumeCompleteness}}%</div>
      </view>-->
      <canvas
        canvas-id="runCanvas"
        id="runCanvas"
        class="canvas"
        style="width: 100px; height: 100px;"
      ></canvas>
    </div>
    <div>
      <div
        class="cell flex flex-between flex-middle"
        v-for="item in cells1"
        :key="item.title"
        @click="routerTo(item.url, item.type)"
      >
        <div class="left flex flex-middle">
          <img :src="item.icon" />
          <span class="title-">{{item.title}}</span>
        </div>
        <img class="right" src="/static/images/my/tuceng95.png" alt />
      </div>
    </div>
    <div>
      <div
        class="cell flex flex-between flex-middle"
        v-for="item in cells2"
        :key="item.title"
        @click="routerTo(item.url)"
      >
        <div class="left flex flex-middle" v-if="!item.isBtn">
          <img :src="item.icon" />
          <span class="title-">{{item.title}}</span>
        </div>
        <button class="left flex flex-middle contact-btn" v-else open-type="contact">
          <img :src="item.icon" />
          <span class="title-">{{item.title}}</span>
        </button>
        <img class="right" src="/static/images/my/tuceng95.png" alt />
      </div>
    </div>
    <button class="cancelbind" @click="loginOut" v-if="memberId">解除绑定</button>
  </section>
</template>
<script>
const cells1_1 = require("../../../../static/images/my/cells1_1.png");
const cells1_2 = require("../../../../static/images/my/cells1_2.png");
const cells1_3 = require("../../../../static/images/my/cells1_3.png");
const cells1_4 = require("../../../../static/images/my/cells1_4.png");
const cells1_5 = require("../../../../static/images/my/cells1_5.png");
const cells2_1 = require("../../../../static/images/my/cells2_1.png");
const cells2_2 = require("../../../../static/images/my/cells2_2.png");
const cells2_3 = require("../../../../static/images/my/cells2_3.png");
export default {
  data() {
    return {
      info: "",
      cells1: [
        {
          icon: cells1_1,
          title: "我的订单",
          url: "/pages/order/taskList/main"
        },
        {
          icon: cells1_2,
          title: "我的购物车",
          url: "/pages/my/shoppingcart/main"
        },
        {
          icon: cells1_3,
          title: "我的兼职申请",
          url: "/pages/my/parttime/main"
        },
        {
          icon: cells1_4,
          title: "我的跑腿任务",
          url: "/pages/my/runleg/main",
          type: 1
        },
        {
          icon: cells1_5,
          title: "我的跳蚤市场",
          url: "/pages/my/flea/main",
          type: 1
        }
      ],
      cells2: [
        {
          icon: cells2_1,
          title: "我的团队",
          url: "/pages/my/team/main"
        },
        {
          icon: cells2_2,
          title: "客服中心",
          isBtn: true
        },
        {
          icon: cells1_1,
          title: "邀请好友",
          url: "/pages/my/invite/main"
        },
        {
          icon: cells2_3,
          title: "地址管理",
          url: "/pages/my/address/main"
        }
      ],
      memberId: "",
      ctx2: "",
      isConversation: false
    };
  },
  onShow() {
    this.isConversation = false;
    this.getMemberInfo();
    this.memberId = wx.getStorageSync("memberId");
    let options = wx.getStorageSync("usersig");
    let userID = "FT_" + this.memberId;
    if (options && userID) {
      wx.$app
        .login({
          userID: userID,
          userSig: options
        })
        .then(() => {
          // wx.showLoading({
          //     title: '登录成功'
          // })
          wx.$app.ready(() => {
            wx.hideLoading();
            wx.$app.getMyProfile().then(res => {
              this.$store.commit("updateMyInfo", res.data);
            });
            wx.$app.getConversationList().then(res => {
              // console.log('获取未读消息',res.data.conversationList)
              // if (res.code == 0 && res.data.conversationList.length > 0) {
              //   this.isConversation = true;
              //   // console.log(this.isConversation)
              // }
              res.data.conversationList.map(item => {
                if (item.unreadCount > 0) {
                  this.isConversation = true;
                  return;
                }
              });
            });
            // wx.switchTab({
            //   url: '../index/main'
            // })
          });
        });
    }
  },
  methods: {
    routerTo(url, type) {
      if (!url) return;
      if (type == 1 && this.info.realNameStatus == 0) {
        wx.showToast({
          title: "请先实名认证",
          icon: "none",
          duration: 2000,
          mask: false
        });
        return;
      }
      wx.navigateTo({ url: url });
    },
    // 绘制圆形进度条方法
    run(c, w, h) {
      let that = this;
      var num = 2 * Math.PI / 100 * c - 0.5 * Math.PI;
      that.ctx2.arc(w, h, w - 8, -0.5 * Math.PI, num); //每个间隔绘制的弧度
      that.ctx2.setStrokeStyle("#3bb8fd");
      that.ctx2.setLineWidth("2");
      that.ctx2.setLineCap("butt");
      that.ctx2.stroke();
      that.ctx2.beginPath();
      that.ctx2.setFontSize(20); //注意不要加引号
      that.ctx2.setFillStyle("#3bb8fd");
      that.ctx2.setTextAlign("center");
      that.ctx2.setTextBaseline("middle");
      that.ctx2.fillText(c + "%", w, h);
      that.ctx2.draw();
    },
    /**
     * start 起始百分比
     * end 结束百分比
     * w,h 其实就是圆心横纵坐标
     */
    // 动画效果实现
    canvasTap(start, end, time, w, h) {
      var that = this;
      start++;
      if (start > end) {
        return false;
      }
      that.run(start, w, h);
      setTimeout(function() {
        that.canvasTap(start, end, time, w, h);
      }, time);
    },
    /**
     * id----------------canvas画板id
     * percent-----------进度条百分比
     * time--------------画图动画执行的时间
     */
    draw(id, percent, animTime) {
      var that = this;
      const ctx2 = wx.createCanvasContext(id);
      this.ctx2 = ctx2;
      // that.setData({
      //   ctx2: ctx2,
      //   percentage: percent,
      //   animTime: animTime
      // });
      var time = animTime / percent;
      wx
        .createSelectorQuery()
        .select("#" + id)
        .boundingClientRect(function(rect) {
          //监听canvas的宽高
          var w = parseInt(rect.width / 2); //获取canvas宽的的一半
          var h = parseInt(rect.height / 2); //获取canvas高的一半，
          that.canvasTap(0, percent, time, w, h);
        })
        .exec();
    },
    //会员信息
    getMemberInfo() {
      this.$api.getMemberInfo().then(res => {
        this.info = res.data;
        //百分比
        this.globalData.resumeCompleteness = this.info.resumeCompleteness;
        this.draw("runCanvas", this.info.resumeCompleteness, 500);
      });
    },
    loginOut() {
      wx.$app.logout();
      wx.clearStorage();
      this.memberId = wx.getStorageSync("memberId");
      this.getMemberInfo();
    }
  }
};
</script>
<style lang="scss" scoped>
.my-index {
  .top {
    height: 160px;
    background: #3bb8fd;
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 100%;
      margin-right: 15px;
    }
    .icon {
      width: 20px;
      height: 22px;
      position: relative;
      &:not(:first-child) {
        margin-left: 30px;
        margin-right: 10px;
      }
    }

    .top- {
      padding: 20px 15px;
      .name {
        font-size: 18px;
        font-family: PingFang;
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        margin-bottom: 15px;
      }
      .status {
        font-size: 12px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        vertical-align: center;
      }
      .isConversation {
        position: relative;
      }
      .ellipsis {
        background: rgb(246, 78, 5);
        // padding:2px 10px;
        border-radius: 20%;
        // width: 20px;
        height: 14px;
        padding: 0 2px;
        border-radius: 7px;
        position: absolute;
        top: 16px;
        left: 15px;
      }
      // .isConversation::before {
      //   content: "...";
      //   // width: 5px;
      //   // height: 5px;
      //   background: rgb(246,78,5);
      //   border-radius: 20%;
      //   position: absolute;
      //   top: 18px;
      //   left: 15px;
      //   padding:2px 10px;
      //   color: #fff;
      //   font-size: 18px;
      // }
    }
    .bottom- {
      padding: 0 25px;
    }
    .num {
      font-size: 18px;
      font-family: DIN;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin-bottom: 10px;
    }
    .num-desc {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }
    .qiandao {
      width: 40px;
      height: 24px;
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 5px;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      line-height: 24px;
    }
  }
  .resume {
    margin: 15px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 3px 15px 0px rgba(127, 127, 127, 0.1);
    border-radius: 2px;
    padding: 15px 20px 20px 10px;
    .wrap {
      width: 55px;
      height: 55px;
      border-radius: 100%;
      border: 1px solid #3bb8fd;
    }
    .title- {
      font-size: 15px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(46, 46, 46, 1);
    }
    .desc- {
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(193, 196, 201, 1);
    }
    .btn- {
      width: 80px;
      height: 26px;
      line-height: 26px;
      background-color: rgba(59, 184, 253, 1) !important;
      border-radius: 3px;
      border: none !important;
      font-size: 12px;
      font-family: PingFang;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
      margin-top: 15px;
      margin-left: 0;
      &:after {
        border: none;
      }
    }
  }
  .cell {
    margin: 0 20px;
    &:first-of-type {
      margin-top: 20px;
    }
    &:last-of-type {
      border-bottom: 1px solid #f5f4f7;
    }
    padding-bottom: 20px;
    .left {
      img {
        width: 16px;
        height: 16px;
      }
      .title- {
        font-size: 14px;
        font-family: PingFang;
        font-weight: 500;
        color: rgba(46, 46, 46, 1);
        margin-left: 30px;
      }
    }
    .right {
      width: 7px;
      height: 12px;
    }
  }
  .cancelbind {
    height: 44px;
    line-height: 44px;
    background: rgba(59, 184, 253, 1);
    border-radius: 5px;
    margin: 20px 15px;
    font-size: 15px;
    font-family: PingFang;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
}
.contact-btn {
  width: 100%;
  padding: 0px;
  height: 18px;
}
</style>
<style lang="scss">
.my-index {
  .van-icon-arrow {
    color: white;
  }
}
</style>
